<template>
  <div class="content">
    <el-container style="height: 100%; border: 1px solid #eee">
      <aside-nav :CollapseWidth="CollapseWidth"></aside-nav>
      <el-container>
        <el-header style="text-align: right; font-size: 15px; height: auto">
          <!-- <i class="el-icon-edit"></i>
          <i class="el-icon-share"></i>
          <i class="el-icon-delete"></i> -->
          <div style="margin-top: 5px; margin-bottom: 5px">
            <!-- <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :fit="fit"></el-image> -->
            <label style="float:left;margin-left：20px;">
              <!-- //从vuex 中读取用户数据0 -->
              {{ loginuser0 }}欢迎您0000000！！
              <!-- //从vuex 中读取用户数据1 -->
              <!-- {{ loginmessage }}欢迎您！ -->
              <!-- //从vuex 中读取用户数据2 -->
              <!-- {{ getloginusername }}欢迎您！ -->
              <!-- //从vuex 中读取用户数据3 -->
              {{ getloginusername3 }}欢迎您！
              <!-- //从vuex 中读取用户数据3 mapGetters 组件内方便调用 -->
              {{ getoperation }}
            </label>

            <el-radio-group
              v-model="language"
              @change="languageChange"
              style="margin-right: 10px"
            >
              <el-radio label="0" style="width: 60px">{{
                $t("user.Chinese")
              }}</el-radio>
              <el-radio label="1" style="width: 60px">{{
                $t("user.English")
              }}</el-radio>
            </el-radio-group>

            <router-link to="/"
              ><el-button size="small" type="primary" icon="el-icon-back">{{
                $t("user.Exit")
              }}</el-button></router-link
            >
          </div>

          <!-- <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->

          <el-menu
            default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template v-slot:title>我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"
              ><a href="https://www.ele.me" target="_blank"
                >订单管理</a
              ></el-menu-item
            >
          </el-menu>
        </el-header>
        <el-main>
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import Vue from "vue";
//  imgUrl:require( './../../assets/logo.png');

import AsideNav from "../../components/aside.vue";
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import { mapState, mapGetters } from "vuex";
export default {
  components: {
    AsideNav,
  },
  // 表单验证规则
  data() {
    return {
      // 操作标记
      operation: "用户一览",
      // 菜单是否展开的临界宽度
      CollapseWidth: 1024,
      // 语言
      language: "0",
    };
  },

  computed: {
    //计算属性 从vuex 中读取用户数据1  mapState 组件内方便调用
    // ...mapState({ loginuser0: "loginuser" }),
    ...mapState({ loginuser0: (state) => state.loginuser.name + "asdfsdfsd" }),
    //计算属性 从vuex 中读取用户数据1
    loginmessage: function () {
      return this.$store.state.loginuser.name;
      // return this.$route.query.id;
      // // this.$route.params.id;
    },
    //从vuex 中读取用户数据2
    getloginusername() {
      return this.$store.getters.getloginusername;
    },
    //从vuex 中读取用户数据3 mapGetters 组件内方便调用
    ...mapGetters({
      getloginusername3: "getloginusername",
      getoperation: "usermanagermoudle/getoperation",
    }),
  },

  methods: {
    // 语言切换
    languageChange(histType) {
      if (histType == "1") {
        //如果切换成英文
        this.$i18n.locale = "en";
        localStorage.setItem("lan", "en");
      } else {
        //如果切换成英文
        this.$i18n.locale = "zh";
        localStorage.setItem("lan", "zh");
      }
    },
  },
  created: function () {
    var tlanguage = localStorage.getItem("lan") || "zh";
    this.language = tlanguage == "zh" ? "0" : "1";
    // alert(this.language);

    //alert(Vue.prototype.base_url +);
  },
  mounted() {},
};
</script>
<style scoped>
.avatar {
  height: auto;
  width: auto;
  max-height: 300px;
  max-width: 100%;
}
</style>
